<template>
    <div class="history-tab-container">
        <!-- 左侧按钮区域 -->
        <div class="left-sidebar">
            <div class="sidebar-buttons">
                <button class="sidebar-btn active" @click="switchTab('dataManagement', $event)">
                    <div class="btn-icon">🗃️</div>
                    <div class="btn-text">数据管理</div>
                </button>
                <!-- <button class="sidebar-btn" @click="switchTab('getData', $event)">
                    <div class="btn-icon">📥</div>
                    <div class="btn-text">获取数据</div>
                </button> -->
                <button class="sidebar-btn" @click="switchTab('storageManagement', $event)">
                    <div class="btn-icon">💾</div>
                    <div class="btn-text">存储管理</div>
                </button>
            </div>
        </div>
        
        <!-- 右侧内容区域 -->
        <div class="content-area">
            <DataManagement v-if="currentTab === 'dataManagement'" />
            <GetData v-if="currentTab === 'getData'" />
            <StorageManagement v-if="currentTab === 'storageManagement'" />
        </div>
    </div>
</template>

<script>
import DataManagement from '@/components/HistoryTab/DataManagement.vue'
// import GetData from '@/components/HistoryTab/GetData.vue'
import StorageManagement from '@/components/HistoryTab/StorageManagement.vue'

export default {
    name: 'HistoryTab',
    components: {
        DataManagement,
        // GetData,
        StorageManagement
    },
    data() {
        return {
            currentTab: 'dataManagement'
        }
    },
    methods: {
        switchTab(tab, event) {
            this.currentTab = tab
            // 更新按钮的active状态
            document.querySelectorAll('.sidebar-btn').forEach(btn => {
                btn.classList.remove('active')
            })
            event.currentTarget.classList.add('active')
        }
    }
}
</script>

<style scoped>
.history-tab-container {
    display: flex;
    height: 100%;
    background-color: #f5f5f5;
}
.left-sidebar {
    width: 200px;
    background-color: #fff;
    border-right: 1px solid #e0e0e0;
    padding: 20px 0;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}
.sidebar-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 15px;
}
.sidebar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 10px;
    border: none;
    background-color: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
    color: #333;
}
.sidebar-btn:hover {
    background-color: #f0f8ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.sidebar-btn.active {
    background-color: #1890ff;
    color: white;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}
.btn-icon {
    font-size: 24px;
    margin-bottom: 8px;
}
.btn-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

/* 右侧内容区域 */
.content-area {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
}
</style> 